<script setup>
import { ref, defineProps, toRefs, computed } from 'vue'
import { useUserStore } from '@/stores'
import { formatRelativeTime } from '@/utils/format'
import { createCommentService, deleteCommentByIdService, getCommentByIdWithChildrenService, toggleCommentLikeService } from '@/api/comment'
import { throttle } from 'lodash-es'
import { ElMessage } from 'element-plus'
const defaultAvatarUrl = 'https://pic1.zhimg.com/80/v2-8bbeacad84bfddd22b5d54e3631d96ee_720w.jpg?source=1940ef5c'
const userStore = useUserStore()
const user = userStore.user
// 解构props
const { commentsRes, totalCount, moment } = defineProps({
  commentsRes: {
    type: Object,
    default: () => {
      return {
        records: [],
        parentCommentCount: 0
      }
    }
  },
  totalCount: {  // 接收动态自带的评论总数
    type: Number,
    default: 0
  },
  moment: {
    type: Object,
    required: true,
    default: () => {
      return {}
    }
  }
})



const commentList = ref([])
const parentCommentCount = ref(commentsRes.parentCommentCount)
// 进入评论区组件时对props传来的数据的预处理评论数据
const preprocess = () => {
  console.log('一级评论数据', commentsRes);
  // 预处理一级和二级评论数据
  commentList.value = commentsRes.records.map(item => {
    return {
      ...item,
      showMoreCommentBtn: item.childrenTotalLength > item.children.length ? true : false,//比如"共8条回复，点击查看"按钮的显示隐藏控制
      createTime: formatRelativeTime(item.createTime),
      children: item.children.map(child => {
        return {
          ...child,
          createTime: formatRelativeTime(child.createTime)
        }
      }),
      pageParams: {
        page: 1,
        pageSize: 10
      },
    }
  })
  console.log('处理后的一级评论数据', commentList.value);
}
preprocess()

// 分页参数
const pageParams = ref({
  page: 1,
  pageSize: 10
})

const subCommentMap = ref(new Map())
// 展开/收起子评论
const unFoldSubCommentList = async (item) => {
  const commentId = item.commentId
  const { data } = await getCommentByIdWithChildrenService({
    commentId:item.commentId,
    page: item.pageParams.page,
    pageSize: item.pageParams.pageSize
  })
  console.log('获取评论id为', commentId, '的子评论数据', data);

  // 找到评论列表中匹配的评论并更新其子评论
  const index = commentList.value.findIndex(item => item.commentId === commentId);
  if (index !== -1) {
    //先保存未展开时的初始子评论数据
    if (!subCommentMap.value.has(commentId)) {
      subCommentMap.value.set(commentId, commentList.value[index].children)
    }
    commentList.value[index].children = data.parentComment.children.map(
      child => {
        return {
          ...child,
          createTime: formatRelativeTime(child.createTime)
        }
      }
    )
    commentList.value[index].currentPage = data.currentPage
    commentList.value[index].totalPages = data.totalPages
  }
  console.log(commentList.value[index]);

  //将"共35条回复，点击查看"的显示隐藏控制
  commentList.value[index].showMoreCommentBtn = false
}



// 展开/收起子评论
const foldSubCommentList = (commentId) => {
  // 找到Map中保存的未展开时的初始子评论数据
  const initialSubCommentList = subCommentMap.value.get(commentId)
  // 找到评论列表中匹配的评论并更新其子评论
  const index = commentList.value.findIndex(item => item.commentId === commentId);
  if (index !== -1) {
    commentList.value[index].children = initialSubCommentList
    commentList.value[index].showMoreCommentBtn = true
  }
}

const changePage = (page, item) => {
  item.pageParams.page = page
  console.log('切换页码', item.pageParams.page);
  unFoldSubCommentList(item)
}

//预先填入的placeHolder
const phrases = ref([
  "wifi连接中......检测到粉丝评论输出电波......",
  "进来来和UP唠会嗑呗",
  "哎呦，不错哦，发条评论吧",
  "勇敢滴少年啊快去创造热评~",
  "下面我简单喵两句",
  "你渴望拥有力量吗?评论让力量更强大",
  "轻轻敲醒沉睡的心灵，让我看看你的点评",
  "万水千山总是情，评论两句行不行",
  "宫廷玉液酒，评论走一走",
  "新的风暴已经出现，你的妙评何时再现",
  "只是一直在等你而已，才不是想被评论呢~",
  "与其赞同别人的话语，不如自己畅所欲言。",
  "天青色等烟雨，评论区在等你"
])
// 评论输入相关
const replyMomentPlaceholder = computed(() => {
  const randomIndex = Math.floor(Math.random() * phrases.value.length);
  return phrases.value[randomIndex]; // 随机选择一句作为 placeholder
})

const replyMomentParams = ref({
  content: '',
  momentId: moment.momentId,
  pid: null,//固定, 最重要,只要是一级评论,replyCommentId和replyUserId都为null
  userId: user.userId,

})


const isReplyMomentEditorFocused = ref(false)

const isReplyMomentEditorActive = computed(() => {
  return isReplyMomentEditorFocused.value
    || replyMomentParams.value.content !== ''
})

//输入框组件输入处理
const handleInput = (e) => {
  replyMomentParams.value.content = e.target.innerText
  console.log('顶部输入框内容', replyMomentParams.value.content);
}
const handlePaste = (e) => {
  e.preventDefault()
  const text = e.clipboardData.getData('text/plain')
  replyMomentParams.value.content += text
  console.log('顶部补充了粘贴内容', replyMomentParams.value.content);
  const selection = window.getSelection()
  if (selection && selection.rangeCount > 0) {
    const range = selection.getRangeAt(0)
    range.deleteContents()
    range.insertNode(document.createTextNode(text))
    selection.removeAllRanges()
    selection.addRange(range)
  }

}


const replyCommentParams = ref({
  momentId: moment.momentId,
  content: '',
  pid: -1,//最重要,回复的评论必定是二级评论,所以pid不为null
  userId: user.userId,
  replyUserId: -1,
  replyCommentId: -1,
})
// 评论输入相关

const handleCommentInput = (e) => {
  replyCommentParams.value.content = e.target.innerText
  console.log('回复输入框内容', replyCommentParams.value.content);
}
const handleCommentPaste = (e) => {
  e.preventDefault()
  const text = e.clipboardData.getData('text/plain')
  replyCommentParams.value.content += text
  console.log('回复补充了粘贴内容', replyCommentParams.value.content);
  const selection = window.getSelection()
  if (selection && selection.rangeCount > 0) {
    const range = selection.getRangeAt(0)
    range.deleteContents()
    range.insertNode(document.createTextNode(text))
    selection.removeAllRanges()
    selection.addRange(range)
  }

}


// 新增状态管理
const activeReplyId = ref(null) // 当前激活的评论ID
const replyNickName = ref('') // 被回复用户的昵称
const isReplyCommentFocused = ref(false)
const toggleReplyCommentBox = (comment) => {
  console.log('点击了回复按钮', comment);
  let activeId = comment.commentId
  if (comment.pid !== null) {//二级评论,找回一级评论的id
    activeId = comment.pid
  }
  console.log('激活的父级id', activeId);
  console.log('旧的激活的id', activeReplyId.value);
  if (activeReplyId.value !== activeId) {
    // 关闭其他回复框并清空内容
    if (activeReplyId.value) {
      replyCommentParams.value = {
        ...replyCommentParams.value,
        content: '',
        replyUserId: -1,
        replyCommentId: -1
      }
      const prevEditor = document.querySelector(`[data-comment-id="${activeReplyId.value}"] .brt-editor`)
      if (prevEditor) prevEditor.innerHTML = ''
    }

    // 设置当前激活的评论
    activeReplyId.value = activeId
    replyNickName.value = comment.nickName
    replyCommentParams.value.replyUserId = comment.userId
    replyCommentParams.value.replyCommentId = comment.commentId
    replyCommentParams.value.pid
      = comment.pid ? comment.pid : comment.commentId//如果是一级评论,pid就是commentId,如果是二级评论,pid就是pid
  } else {
    // activeReplyId.value = null
    if (replyNickName.value !== comment.nickName) {
      replyNickName.value = comment.nickName
    } else {
      activeReplyId.value = null
    }
  }
  console.log('更新的激活的id', activeReplyId.value);
}

const isReplyCommentBoxActive = computed(() => {
  return replyCommentParams.value.content !== '' || isReplyCommentFocused.value
})


const replyComment = async (comment) => {
  // comment是一级评论
  if (!replyCommentParams.value.content) {
    ElMessage.error('评论内容不能为空')
    return
  }
  if (replyCommentParams.value.content.length > 1000) {
    ElMessage.error('评论内容不能超过1000个字符')
    return
  }
  console.log('回复评论的参数', replyCommentParams.value);


  const { data } = await createCommentService(replyCommentParams.value)
  console.log(data);

  const prevEditor = document.querySelector(`[data-comment-id="${activeReplyId.value}"] .brt-editor`)
  if (prevEditor) prevEditor.innerHTML = ''
  replyCommentParams.value.content = ''

  
  // 插入评论到评论列表
  const newComment = {
    ...data,
    //测试数据
    /*     content: replyCommentParams.value.content,
        userId: user.userId,
        replyUserId: replyCommentParams.value.replyUserId,
        replyCommentId: replyCommentParams.value.replyCommentId,
        likeCount: 0,
        pid: replyCommentParams.value.pid,
        commentId: +new Date(),
        momentId: moment.momentId,
        createTime: formatRelativeTime(new Date()), */

    replyUserNickName: replyNickName.value,
    children: [],
    showMoreCommentBtn: false,
    showPagination: false,
    childrenTotalLength: 0,
    isLiked: false,
    nickName: user.nickName,
    avatarUrl: user.avatarUrl,
  }
  /*
  {
      "commentId": 8945,
      "momentId": 1,
      "content": "我是动态作者我回复一级评论",
      "pid": 1,
      "userId": 16,
      "replyUserId": 1,
      "replyCommentId": 1,
      "likeCount": 1,
      "createTime": "1天前",
      "children": [],
      "showMoreCommentBtn": false,
      "showPagination": false,
      "childrenTotalLength": null,
      "isLiked": true,
      "nickName": "刘诗诗医学",
      "avatarUrl": "https://img0.baidu.com/it/u=3257043153,3302093734&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800",
      "replyUserNickName": null
  }
  */



  // if (comment.pid === null) {//一级评论,插入到父级评论的children中
  const parentIndex
    = commentList.value.findIndex(
      item => item.commentId === comment.commentId)
  if (parentIndex !== -1) {
    commentList.value[parentIndex].children.push(newComment)
  }
  // }
  ElMessage.success('评论成功')


}







const showAdditionalBtn = ref()//评论的三个点more

const toggleCommentLike = throttle(async (item) => {
  const wasLiked = item.isLiked;  // 保存初始状态
  // 乐观更新
  item.isLiked = !wasLiked;
  item.likeCount += wasLiked ? -1 : 1;
  if (item.pid === null) {
    console.log('点赞了一级评论', item.commentId);
  }
  else {
    console.log('点赞了一级评论的子评论', item.commentId);
  }
  try {
    // 直接等待请求完成，不处理返回数据
    const { data } = await toggleCommentLikeService(item.commentId);
    console.log(data);
  } catch (error) {
    // 请求失败时回滚
    item.isLiked = wasLiked;
    item.likeCount += wasLiked ? 1 : -1;
    console.error('点赞操作失败:', error);
  }
}, 1000);

// 回复动态
const replyMoment = async () => {

  if (!replyMomentParams.value.content) {
    ElMessage.error('评论内容不能为空')
    return
  }
  if (replyMomentParams.value.content.length > 1000) {
    ElMessage.error('评论内容不能超过1000个字符')
    return
  }
  console.log('回复动态', replyMomentParams.value);
  /*   插入评论到评论列表
    const newComment = {
      ...replyMomentParams.value,
      commentId: +new Date(),
      createTime: formatRelativeTime(new Date()),
      children: [],
      showMoreCommentBtn: false,
      showPagination: false,
      childrenTotalLength: 0,
      isLiked: null,
      nickName: user.nickName,
      avatarUrl: user.avatarUrl,
      replyUserNickName: null,
      likeCount: 0,
      replyCommentId: null,
      replyUserId: null,
    }
    commentList.value.unshift(newComment) */

  let { data } = await createCommentService(replyMomentParams.value)
  console.log(data);
  //关键需要获取新建的commentId,如果后面用户想到点赞自己的评论需要用到
  const newComment = {
    ...data,
    // createTime: formatRelativeTime(new Date()),
    children: [],
    showMoreCommentBtn: false,
    showPagination: false,
    childrenTotalLength: 0,
    isLiked: false,
    nickName: user.nickName,
    avatarUrl: user.avatarUrl,
    replyUserNickName: null,
    pageParams: {
      page: 1,
      pageSize: 10
    }
  }
  // 插入评论到评论列表
  commentList.value.unshift(newComment)
  // 清除富文本编辑器内容
  const editor = document.querySelector('.top_rich_textarea_inner')
  if (editor) {
    editor.innerHTML = ''
  }
  // 重置回复框状态
  replyMomentParams.value.content = ''
  replyMomentParams.value.pid = null

  // 刷新评论列表
  // 向父组件发送刷新事件

  // preprocess()
  ElMessage.success('评论成功')
  // 在这里添加回复逻辑
}
// 删除评论
const deleteComment = async (commentId) => {
  try {
    await ElMessageBox.confirm(
      '删除评论后，评论下所有回复都会被删除, 是否继续?',
      '删除评论',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )

    const { data } = await deleteCommentByIdService(commentId)
    console.log(data);
    ElMessage.success('删除成功')

    // 递归查找并删除评论
    const deleteRecursive = (comments) => {
      for (let i = comments.length - 1; i >= 0; i--) {
        if (comments[i].commentId === commentId) {
          comments.splice(i, 1)
          return true
        }
        if (comments[i].children?.length) {
          if (deleteRecursive(comments[i].children)) {
            return true
          }
        }
      }
      return false
    }
    // 从预处理后的评论列表删除
    deleteRecursive(commentList.value)
  } catch (error) {
    if (error !== 'cancel') {
      ElMessage.error('删除失败: ' + error.message)
    }
  }
}




</script>

<template>
  <!-- 顶部评论头部 -->
  <div class="comment-header">
    <div class="bili-comments-header-renderer">
      <!-- 顶部评论,最热最新 -->
      <div class="navbar">
        <div class="title">
          <h2 class="title">评论</h2>
          <div class="count">{{ totalCount }}</div>
        </div>
        <div class="sort-actions">
          <button class="active">最热</button>
          <div class="sort-div"> |</div>
          <button>最新</button>
        </div>
      </div>

      <!-- 顶部评论的盒子 含头像和输入区域-->
      <div class="commentbox">

        <div class="user-avatar">
          <img :src="user.avatarUrl ? user.avatarUrl : defaultAvatarUrl" alt="无法加载">
        </div>

        <div class="comment-area">

          <div class="body">

            <!--  当focus或文本框不为空时加入active样式 -->
            <div class="editor" :class="{ active: isReplyMomentEditorActive }">

              <span class="bili-comment-rich-textarea">
                <div class="input">
                  <div class="brt-root">
                    <div v-if="replyMomentParams.content === ''" class="brt-placeholder">
                      {{ replyMomentPlaceholder }}
                    </div>
                    <div @input="handleInput" @paste="handlePaste" @focus="isReplyMomentEditorFocused = true"
                      @blur="isReplyMomentEditorFocused = false" class="brt-editor top_rich_textarea_inner"
                      contenteditable="true">
                    </div>
                  </div>
                </div>
              </span>

            </div>
          </div>

          <!--  当focus或文本框不为空时取消hidden样式 -->
          <div :class="['footer', { hidden: !isReplyMomentEditorActive }]">

            <div class="left-icon">
              <button><i class="iconfont icon-minzuibiyan_confounded-face"></i></button>
              <button><i class="iconfont icon-aite"></i></button>
              <button><i class="iconfont icon-tupian"></i></button>
            </div>

            <div class="pub">
              <button @click="replyMoment()" class="submit-btn">发布</button>
            </div>
          </div>


        </div>

      </div>

    </div>



    <!--     <div style="display: none;" class="bili-comments-bottom-fixed-wrapper">
      <div class="down">
        <div class="user-avatar">
          <img src="https://pic1.zhimg.com/80/v2-8bbeacad84bfddd22b5d54e3631d96ee_720w.jpg?source=1940ef5c" alt="无法加载">
        </div>
        <div class="comment-area">

          <el-input type="textarea" :class="{ 'has-content': replyArticleContent !== '' }" @focus="isFocused = true"
            :autosize="{ minRows: 2, maxRows: 5 }" :placeholder="placeholder" v-model="replyArticleContent">
          </el-input>
          <div :class="['footer', { 'hidden': replyArticleContent === '' && !isFocused }]">

            <div class="left-icon">
              <button><i class="iconfont icon-minzuibiyan_confounded-face"></i></button>
              <button><i class="iconfont icon-aite"></i></button>
              <button><i class="iconfont icon-tupian"></i></button>
            </div>

            <div class="pub">
              <button @click="replyMoment()" class="submit-btn">发布</button>
            </div>
          </div>
        </div>
      </div>
    </div> -->


  </div>

  <!-- 评论列表 -->
  <div class="contents">

    <div class="bili-comment-thread-renderer" v-for="(item) in commentList" :key="item.commentId">

      <!-- 一级评论 -->
      <div class="bili-comment-renderer">

        <div class="body">
          <a class="user-avatar" href="">
            <img :src="item.avatarUrl" alt="" style="object-fit:cover;">
          </a>
          <div class="main">
            <div class="header">

              <div class="info">
                <div class="user-name">
                  <a href="#">{{ item.nickName }}</a>
                </div>
                <div class="user-level">
                  <i class="iconfont icon-ic_userlevel_"></i>
                </div>
                <div v-if="item.userId === moment.userId" class="user-up">
                  <i class="iconfont icon-a-UPzhurenzheng1x"></i>
                </div>
              </div>


            </div>

            <div class="content">
              <i class="top">置顶</i>
              <span class="multiline_text">{{ item.content }}</span>
            </div>

            <div class="footer">

              <div class="left">
                <div class="pubdate">{{ item.createTime }}</div>
                <div class="like" @click="toggleCommentLike(item)">
                  <i :class="['iconfont',
                    { 'icon-zan': !item.isLiked },
                    { 'icon-dianzan2': item.isLiked }]">
                  </i>
                  <span>{{ item.likeCount > 0 ? item.likeCount : '' }}</span>
                </div>
                <div class="dislike">
                  <i class="iconfont icon-cai"></i>
                </div>
                <div class="reply">
                  <span @click="toggleReplyCommentBox(item)">回复</span>
                </div>


              </div>
              <div class="more">
                {{ item.commentId }}
                <i @click="showAdditionalBtn = item.commentId" class="iconfont icon-More">
                </i>
                <ul :class="['options', { 'hidden': showAdditionalBtn !== item.commentId }]"
                  @mouseleave="showAdditionalBtn = null">

                  <div v-if="item.userId !== user.userId">
                    <li>加入黑名单</li>
                    <li>举报</li>
                  </div>
                  <div v-else>
                    <li @click="deleteComment(item.commentId)">删除</li>
                  </div>


                </ul>
              </div>

            </div>
          </div>
        </div>
      </div>


      <!-- 二级子评论 -->
      <div class="replies">
        <div class="expander">
          <div class="expander-contents">

            <!-- 二级评论的body -->
            <div class="body" v-for="(subitem) in item.children" :key="subitem.commentId">

              <div class="main">

                <span class="bili-comment-user-info">

                  <div class="info">
                    <div class="user-name">
                      <a href="#">{{ subitem.nickName }}</a>
                    </div>
                    <div class="user-level">
                      <i class="iconfont icon-ic_userlevel_"></i>
                    </div>
                    <div v-if="subitem.userId === moment.userId" class="user-up">
                      <i class="iconfont icon-a-UPzhurenzheng1x"></i>
                    </div>
                  </div>

                  <a class="user-avatar" href="#">
                    <img :src="subitem.avatarUrl" alt="" style="object-fit:cover;">
                  </a>

                </span>





                <span class="reply-content" v-if="subitem.replyUserNickName !== null">
                  回复<i>@<a href="#" class="reply-user">{{ subitem.replyUserNickName }}</a></i>
                </span>
                <span class="reply-inner-text multiline_text">{{ subitem.content }}</span>
              </div>
              <!-- 子评论尾部 -->
              <div class="footer">
                <div class="bili-comment-action-buttons-renderer">
                  <div class="left">
                    <div class="pubdate">{{ subitem.createTime }}</div>
                    <div class="like" @click="toggleCommentLike(subitem)">

                      <i :class="['iconfont',
                        { 'icon-zan': !subitem.isLiked },
                        { 'icon-dianzan2': subitem.isLiked }]">
                      </i>
                      <span>{{ subitem.likeCount > 0 ? subitem.likeCount : '' }}</span>
                    </div>
                    <div class="dislike">
                      <i class="iconfont icon-cai"></i>
                    </div>
                    <div class="reply" @click="toggleReplyCommentBox(subitem)">
                      <span>回复</span>
                    </div>
                  </div>


                  <div class="more">
                    {{ subitem.commentId }}
                    <i class="iconfont icon-More" @click="showAdditionalBtn = subitem.commentId">
                    </i>

                    <ul :class="['options', { 'hidden': showAdditionalBtn !== subitem.commentId }]"
                      @mouseleave="showAdditionalBtn = null">
                      <div v-if="subitem.userId !== user.userId">
                        <li>加入黑名单</li>
                        <li>举报</li>
                      </div>
                      <div v-else>
                        <li @click="deleteComment(subitem.commentId)">删除</li>

                      </div>
                    </ul>
                  </div>

                </div>



              </div>
            </div>

            <!-- 分页栏 -->
            <div class="expander-footer">
              <!--  展开更多,跟body平级 -->
              <!-- 比如控制文字"共35条回复，点击查看"的显示 -->
              <div class="view-more" v-show="item.showMoreCommentBtn">
                <span>共 <i>{{ item.childrenTotalLength }}</i> 条回复，</span>
                <span @click="unFoldSubCommentList(item)">点击查看</span>
              </div>

              <!-- 分页 -->
              <div class="pagination" v-show="item.showMoreCommentBtn === false && item.totalPages > 1">
                <!-- <div class="pagination"> -->
                <div class="pagination-head">共{{ item.totalPages }}页</div>
                <div class="pagination-body">
                  <span v-if="item.currentPage > 1"
                     @click="changePage(item.currentPage - 1, item)">
                    上一页
                  </span>
                  <span v-for="page in item.totalPages" :key="page"
                    :class="{ 'pagination-active': page === item.currentPage }"
                    @click="changePage(page, item)">
                    {{ page }}
                  </span>
                  <span v-if="item.currentPage < item.totalPages"
                    @click="changePage(item.currentPage + 1, item)">
                    下一页
                  </span>
                </div>
                <div class="pagination-foot">
                  <span @click="foldSubCommentList(item.commentId)">收起</span>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div v-if="activeReplyId === item.commentId" :data-comment-id="item.commentId" class="reply-container">
        <div class="bili-comment-box">

          <div class="user-avatar">
            <img :src="user.avatarUrl ? user.avatarUrl : defaultAvatarUrl" alt="无法加载">
          </div>

          <div class="comment-area">
            <div class="body">

              <!--  当focus或文本框不为空时加入active样式 -->
              <div class="editor " :class="{ active: activeReplyId === item.commentId && isReplyCommentBoxActive }">

                <span class="bili-comment-rich-textarea">
                  <div class="input">
                    <div class="brt-root">
                      <div v-if="replyCommentParams.content === ''" class="brt-placeholder ">
                        回复 @{{ replyNickName }}
                        <!-- 这里需补充,怎么才能知道用户点击回复的评论的nickName? -->
                      </div>
                      <div @input="handleCommentInput" @paste="handleCommentPaste" @focus="isReplyCommentFocused = true"
                        @blur="isReplyCommentFocused = false" class="brt-editor" contenteditable="true">
                      </div>
                    </div>
                  </div>
                </span>

              </div>
            </div>

            <!--  当focus或文本框不为空时取消hidden样式 -->
            <div :class="['footer', { 'hidden': !isReplyCommentBoxActive }]">

              <div class="left-icon">
                <button><i class="iconfont icon-minzuibiyan_confounded-face"></i></button>
                <button><i class="iconfont icon-aite"></i></button>
                <button><i class="iconfont icon-tupian"></i></button>
              </div>

              <div class="pub">
                <button @click="replyComment(item)" class="submit-btn">发布</button>
              </div>
            </div>

          </div>


        </div>
      </div>


      <div class="divide"></div>
    </div>

  </div>


  <!-- 没有更多评论 -->
  <div class="end">
    <div v-if="parentCommentCount === commentList.length" class="bottombar limit">没有更多评论</div>
    <!-- <div class="bottombar clickable">查看更多评论</div> -->
  </div>
</template>

<style lang="scss" scoped>
// 顶部评论头部
.comment-header {

  .bili-comments-header-renderer {
    button {
      outline: none;
      border: none;
      appearance: none;
      color: #9499a0;
      padding: 6px;
      background-color: rgb(255, 255, 255, 0);
      text-decoration: none;

    }

    //顶部最新最热
    .navbar {
      display: flex;
      align-items: center;
      height: 28px;
      margin-bottom: 22px;

      .title {
        display: flex;

        h2 {
          font-weight: 500;
          font-size: 20px;
          color: #18191c;
        }

        .count {
          margin: 0px 30px 0px 6px;
          font-size: 13px;
          font-weight: 400;
          color: #9499A0;
          line-height: 28px;
        }
      }

      .sort-actions {
        display: flex;
        align-items: center;

        button:hover {
          color: #00aeec;
        }


        .active {
          color: #18191c;
        }

        .sort-div {
          margin: 0 3px;
          color: #222;
          font-size: 11px;
        }
      }

    }

  }



}

.contents {
  margin-top: 14px;
  position: relative;

  .bili-comment-renderer {

    //一级评论的body
    .body {
      position: relative;
      padding-left: 80px;
      padding-top: 22px;

      .user-avatar {
        position: absolute;
        left: 20px;
        top: 22px;
        width: 48px;
        height: 48px;
        transform-origin: left top;
        transform: scale(0.83333333);

        img {
          border-radius: 50%;
        }
      }

      .main {
        width: 100%;

        .header {
          height: 30px;
          margin-bottom: 4px;
          color: #222;

          // 里面有info
        }

        .content {
          .top {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            position: relative;
            font-size: 12px;
            padding: 3px;
            font-weight: 530;
            width: 35px;
            height: 18px;
            border: 1px solid #ff6699;
            border-radius: 3px;
            color: #ff6699;
            vertical-align: text-bottom;
            margin-bottom: 0.0666em;
            margin-right: 5px;
          }

          .multiline_text {
            white-space: pre-wrap;
            /* 保留换行符并自动换行 */
          }
        }

        // 时间,点赞的底部
        .footer {
          width: 100%;
          display: flex;
          align-items: center;
          position: relative;
          margin-top: 3px;
          // height: 30px;
          font-size: 13px;
          color: #9499a0;

          .left {
            display: flex;
            align-items: center;

            .pubdate {
              line-height: 30px;

            }

            .like {
              cursor: pointer;
              margin-left: 20px;
              display: flex;
              align-items: center;

              i {
                margin-right: 3px;
              }

              .icon-zan {
                color: #9499A0;
              }

              .icon-dianzan2 {
                color: #00AEEC;
              }

              &:hover {
                color: #00AEEC;
              }

            }

            .dislike {
              line-height: 27px;
              margin-left: 20px;
              cursor: pointer;

              .icon-cai1 {
                color: #00AEEC;
              }

              &:hover {
                color: #00AEEC;
              }
            }

            .reply {
              cursor: pointer;

              margin-left: 20px;
              line-height: 30px;

              &:hover {
                color: #00AEEC;
              }

            }


          }

          .more {
            margin-left: auto;
            margin-right: 20px;
            //不能设置宽高否则会挤出图标
            color: #fff; //保持透明
            position: relative;
            // background-color: pink;

            .icon-More {
              cursor: pointer;
            }

            &:hover {
              color: #9499A0;
            }

            .options {
              display: block;
              position: absolute;
              top: 20px;
              right: 0;
              margin: 0px;
              padding: 0px;
              z-index: 10;
              width: 120px;
              list-style: none;
              border-radius: 4px;
              font-size: 14px;
              color: #61666d;
              background-color: #fff;
              box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px;
              overflow: hidden;

              &.hidden {
                display: none;
              }



              li {
                box-sizing: border-box;
                width: 100%;
                display: flex;
                align-items: center;
                height: 36px;
                padding: 0px 15px;
                cursor: pointer;
                user-select: none;

                &:hover {
                  background-color: #f1f2f3;
                }
              }
            }


          }


        }



      }
    }
  }

  //二级评论原先为sub-comment-list 
  // .replies
  .expander {
    // background-color: pink;
    padding-left: 80px;
    margin-top: 2px;

    .expander-contents {
      position: relative;

      //二级评论的body
      .body {
        position: relative;
        padding: 8px 0px 8px 34px;
        border-radius: 4px;

        .main {
          width: 100%;
          display: block;
          overflow: hidden;

          // main里面在bili-comment-user-info里面
          // 有 .info和user-avatar
          // .info和user-avatar平级

          .bili-comment-user-info {

            .info {
              display: inline-flex;
              align-items: center;
              margin-right: 7px; //这个margin-right是自己加的

              .user-name {
                font-size: 13px;
                color: #61666d;
                font-weight: 500;
              }

              .user-level {
                margin-left: 5px;
                width: 23px;
                height: 30px;


                .icon-ic_userlevel_ {
                  color: #ffb37c;
                  font-size: 22px;
                  line-height: 30px;
                }
              }

              .user-up {
                margin-left: 5px;

                .icon-a-UPzhurenzheng1x {
                  color: #ff6699;
                  font-size: 13px;
                  transform: scaleX(1.12);
                  /* 横向拉长 1.5 倍 */
                  display: inline-block;
                  /* 确保 transform 生效 */
                }
              }
            }


            .user-avatar {
              position: absolute;
              left: 0px;
              width: 24px; //24px 重新调整
              height: 24px;

              img {
                border-radius: 50%;

              }
            }
          }

          .reply-content {
            margin-right: 5px;

            font-size: 15px;

            i {
              margin-left: 3px;
              color: #00AEEC;
            }

            a {

              color: #00AEEC;
            }
          }

          .reply-inner-text {
            font-size: 15px;

          }

          .multiline_text {
            white-space: pre-wrap;
            /* 保留换行符并自动换行 */
          }


        }

        .footer {
          padding-right: 20px;

          .bili-comment-action-buttons-renderer {
            width: 100%;
            display: flex;
            align-items: center;
            // height: 30px;
            position: relative;
            margin-top: 3px;
            font-size: 13px;
            color: #9499a0;

            .left {
              display: flex;
              align-items: center;

              .pubdate {
                line-height: 30px;

              }

              .like {
                cursor: pointer;
                margin-left: 20px;
                display: flex;
                align-items: center;

                i {
                  margin-right: 3px;
                }

                .icon-zan {
                  color: #9499A0;
                }

                .icon-dianzan2 {
                  color: #00AEEC;
                }

                &:hover {
                  color: #00AEEC;
                }

              }

              .dislike {
                line-height: 27px;
                margin-left: 20px;
                cursor: pointer;

                .icon-cai1 {
                  color: #00AEEC;
                }

                &:hover {
                  color: #00AEEC;
                }
              }

              .reply {
                cursor: pointer;

                margin-left: 20px;
                line-height: 30px;

                &:hover {
                  color: #00AEEC;
                }

              }
            }

            .more {

              // flex: 1;
              // text-align: end;
              // margin-right: 30px;
              color: #fff;
              // position: relative;
              // background-color: pink;
              margin-left: auto;
              margin-right: 20px;
              // width: 24px;
              // height: 24px;
              position: relative;

              .icon-More {
                cursor: pointer;
              }

              &:hover {
                color: #9499A0;
              }

              .options {
                display: block;
                position: absolute;
                top: 20px;
                right: 0;
                margin: 0px;
                padding: 0px;
                z-index: 10;
                width: 120px;
                list-style: none;
                border-radius: 4px;
                font-size: 14px;
                color: #61666d;
                background-color: #fff;
                box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px;
                overflow: hidden;

                &.hidden {
                  display: none;
                }



                li {
                  box-sizing: border-box;
                  width: 100%;
                  display: flex;
                  align-items: center;
                  height: 36px;
                  padding: 0px 15px;
                  cursor: pointer;
                  user-select: none;

                  &:hover {
                    background-color: #f1f2f3;
                  }
                }
              }


            }

          }




        }

      }

      .expander-footer {
        .view-more {
          color: #9499A0;
          font-size: 13px;
          margin-top: 5px;

          span:nth-child(2):hover {
            color: #00AEEC;
            cursor: pointer;
          }
        }

        .pagination {
          display: flex;
          font-size: 13px;

          .pagination-head {
            margin-right: 20px;
          }

          .pagination-body {
            cursor: pointer;

            span {
              margin: 0 5px;

              &:hover {
                color: #00AEEC;
              }
            }
          }

          .pagination-foot {
            cursor: pointer;

            span:hover {
              color: #00AEEC;
            }
          }
        }
      }


    }
  }

  .bili-comment-box {
    padding: 25px 0px 10px 80px;
    display: flex;

    // 左边头像
    .user-avatar {
      flex-shrink: 0;
      width: 80px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;

      img {
        width: 48px;
        height: 48px;
        border-radius: 50%;
      }
    }

    //右边区域
    .comment-area {

      position: relative;
      width: calc(100% - 80px);

      .body {
        width: 100%;
        transition: height 0.2s;

        .editor {
          width: 100%;
          padding: 8px 0;
          border: 1px solid #f1f2f3;
          box-sizing: border-box;
          border-radius: 6px;
          background-color: #f1f2f3;
          transition: 0.2s;
          cursor: text;


          .bili-comment-rich-textarea {
            display: flex;

            .input {
              min-height: 32px !important;
              max-height: 100px;
              line-height: 32px;
              width: 100%;
              font-size: 14px;
              font-family: inherit;
              box-sizing: border-box;
              color: #18191c;
              background-color: transparent;

              .brt-root {
                position: relative;
              }

              .brt-placeholder {
                position: absolute;
                left: 8px;
                top: 0;
                color: #9499a0;
                font-size: 14px;
                line-height: 20px;
                pointer-events: none;
              }

              .brt-editor {
                outline: none;
                border: none;
                box-sizing: border-box;
                padding: 0 8px;
                font-size: 14px;
                line-height: 20px;
                min-height: 20px;
                overflow-y: auto;
                max-height: 100px;
              }
            }

          }

          &:hover,
          &.active {
            background-color: #fff;
            border-color: #c9ccd0;
          }

        }


      }

      .footer {
        position: relative;
        margin-top: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        &.hidden {
          display: none;
        }

        .left-icon {
          display: flex;

          button {
            border-radius: 6px;
            height: 25px;
            width: 33px;
            margin-right: 5px;
            background-color: #fff;
            border: 1px solid #ccc;
            outline: none;
            display: flex;
            justify-content: center;
            align-items: center;



            .icon-minzuibiyan_confounded-face {
              font-size: 15px;
              line-height: 15px;
            }

            .icon-aite {
              font-size: 20px;
              line-height: 15px;
            }

            .icon-tupian {
              font-size: 18px;
              line-height: 15px;
            }

          }
        }

        .pub {
          height: 32px;
          width: 70px;
          margin-left: auto;

          button {
            cursor: pointer;
            border-radius: 4px;
            outline: none;
            border: none;
            width: 100%;
            height: 100%;
            font-size: 16px;
            color: #fff;
            background-color: #00aeec80;

            &:hover,
            &.active {
              background-color: #00aeec;
            }
          }

        }

      }
    }


  }


  .divide {
    padding-bottom: 14px;
    margin-left: 80px;
    border-bottom: 1px solid #e3e5e4;
  }


}

//没有评论时显示
.end {

  .bottombar {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    font-size: 13px;
    color: #9499A0;
    text-align: center;
    user-select: none;
  }

  // 没有跟多评论时
  .bottombar {
    padding-bottom: 100px;

    &.limit {
      padding-bottom: 20px;
    }
  }

  //查看更多评论时




}


.pagination-active {
  color: #00AEEC;
}

//用户姓名与等级那一行
.info {
  display: inline-flex;
  align-items: center;
  margin-right: 7px; //这个margin-right是自己加的

  .user-name {
    font-size: 13px;
    color: #61666d;
    font-weight: 500;
  }

  .user-level {
    margin-left: 5px;
    width: 23px;
    height: 30px;


    .icon-ic_userlevel_ {
      color: #ffb37c;
      font-size: 22px;
      line-height: 30px;
    }
  }

  .user-up {
    margin-left: 5px;

    .icon-a-UPzhurenzheng1x {
      color: #ff6699;
      font-size: 13px;
      transform: scaleX(1.12);
      /* 横向拉长 1.5 倍 */
      display: inline-block;
      /* 确保 transform 生效 */
    }
  }
}

//顶部头像和输入框,就是评论盒子
.commentbox {
  display: flex;
  transition: height 0.2s;

  // 左边头像
  .user-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 50px;
    flex-shrink: 0;

    img {
      width: 50px;
      border-radius: 50%;
    }
  }

  //右边区域
  .comment-area {
    // flex: 1;
    position: relative;
    width: calc(100% - 80px);

    .body {
      width: 100%;
      transition: height 0.2s;

      .editor {
        width: 100%;
        padding: 8px 0;
        border: 1px solid #f1f2f3;
        box-sizing: border-box;
        border-radius: 6px;
        background-color: #f1f2f3;
        transition: 0.2s;
        cursor: text;

        :deep(.el-textarea__inner) {
          /* background-color: #f1f2f3;
          transition: all 0.3s ease; */


          outline: none !important;
          border: none !important;
          box-sizing: border-box;
          padding: 0 8px;
          font-size: 14px;
          line-height: 20px;
          min-height: 20px;
          overflow-y: auto;
          max-height: 100px;



          &:focus {
            background-color: #fff !important;
          }

          &:hover {
            background-color: #fff;
          }

        }

        .bili-comment-rich-textarea {
          display: flex;

          .input {
            min-height: 32px !important;
            max-height: 100px;
            line-height: 32px;
            width: 100%;
            font-size: 14px;
            font-family: inherit;
            box-sizing: border-box;
            color: #18191c;
            background-color: transparent;

            .brt-root {
              position: relative;
            }

            .brt-placeholder {
              position: absolute;
              left: 8px;
              top: 0;
              color: #9499a0;
              font-size: 14px;
              line-height: 20px;
              pointer-events: none;
            }

            .brt-editor {
              outline: none;
              border: none;
              box-sizing: border-box;
              padding: 0 8px;
              font-size: 14px;
              line-height: 20px;
              min-height: 20px;
              overflow-y: auto;
              max-height: 100px;
            }
          }

        }




        &:hover,
        &.active {
          background-color: #fff;
          border-color: #c9ccd0;
        }

      }


    }

    .footer {
      position: relative;
      margin-top: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      &.hidden {
        display: none;
      }

      .left-icon {
        display: flex;

        button {
          border-radius: 6px;
          height: 25px;
          width: 33px;
          margin-right: 5px;
          background-color: #fff;
          border: 1px solid #ccc;
          outline: none;
          display: flex;
          justify-content: center;
          align-items: center;



          .icon-minzuibiyan_confounded-face {
            font-size: 15px;
            line-height: 15px;
          }

          .icon-aite {
            font-size: 20px;
            line-height: 15px;
          }

          .icon-tupian {
            font-size: 18px;
            line-height: 15px;
          }

        }
      }

      .pub {
        height: 32px;
        width: 70px;
        margin-left: auto;

        button {
          cursor: pointer;
          border-radius: 4px;
          outline: none;
          border: none;
          width: 100%;
          height: 100%;
          font-size: 16px;
          color: #fff;
          background-color: #00aeec80;

          &:hover,
          &.active {
            background-color: #00aeec;
          }
        }

      }

    }
  }

}

#small-comment-box {
  margin-top: 25px;
  margin-bottom: 13px;
}

/* // 时间,点赞的底部
.footer {
  margin-top: 3px;
  display: flex;
  align-items: center;
  height: 30px;
  font-size: 15px;
  color: #9499a0;

  .left {
    display: flex;
    align-items: center;

    .pubdate {
      line-height: 30px;

    }

    .like {
      cursor: pointer;
      margin-left: 20px;
      display: flex;
      align-items: center;

      i {
        margin-right: 3px;
      }

      .icon-zan {
        color: #9499A0;
      }

      .icon-dianzan2 {
        color: #00AEEC;
      }

      &:hover {
        color: #00AEEC;
      }

    }

    .dislike {
      line-height: 27px;
      margin-left: 20px;
      cursor: pointer;

      .icon-cai1 {
        color: #00AEEC;
      }

      &:hover {
        color: #00AEEC;
      }
    }

    .reply {
      cursor: pointer;

      margin-left: 20px;
      line-height: 30px;

      &:hover {
        color: #00AEEC;
      }

    }
  }

  .more {

    flex: 1;
    text-align: end;
    margin-right: 30px;
    color: #fff;
    position: relative;
    // background-color: pink;

    .icon-More {
      cursor: pointer;
    }

    &:hover {
      color: #9499A0;
    }

    .options {

      display: block;
      position: absolute;
      top: 20px;
      right: 0;
      margin: 0px;
      padding: 0px;
      z-index: 10;
      width: 120px;
      list-style: none;
      border-radius: 4px;
      font-size: 14px;
      color: #61666d;
      background-color: #fff;
      box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 5px;
      overflow: hidden;

      &.hidden {
        display: none;
      }



      li {
        box-sizing: border-box;
        width: 100%;
        display: flex;
        align-items: center;
        height: 36px;
        padding: 0px 15px;
        cursor: pointer;
        user-select: none;

        &:hover {
          background-color: #f1f2f3;
        }
      }
    }


  }

} */

//隐藏评论盒子的发送按钮
.hidden {
  display: none !important;
}

.show {
  display: block !important;
}

/*// 穿透设置文本域的背景颜色
.comment-area {
  :deep(.el-textarea__inner) {
    background-color: #f1f2f3;
    transition: all 0.3s ease;

    &:focus {
      background-color: #fff !important;
    }

    &:hover {
      background-color: #fff;
    }
  }
}

// 穿透设置文本域的背景颜色,当有内容时
.comment-area .has-content {
  :deep(.el-textarea__inner) {
    /~ 有内容时的背景颜色 ~/
    background-color: #fff;
  }

}*/

.bili-comments-bottom-fixed-wrapper {
  position: fixed;
  bottom: 0px;
  left: 262px;
  width: 520px;
  z-index: 1;

  .down {
    width: 100%;
    padding: 15px 0px;
    position: relative;
    background-color: #fff;
    border-top: 0.5px solid #e3e5e7;
  }

}
</style>
